import React, { useMemo } from 'react'
import { View } from '@tarojs/components'
import SurveyGroup from '@COMPONENTS/Survey/SurveyGroup'
import SurveyInput from '@COMPONENTS/Survey/SurveyInput'
import SurveyNumber from '@COMPONENTS/Survey/SurveyNumber'
import SurveyHeader from '@COMPONENTS/Survey/SurveyHeader'
import SurveyScale from '@COMPONENTS/Survey/SurveyScale'
import SurveySubChoice from '@COMPONENTS/Survey/SurveySubChoice'
import i18n from '@I18N'
import styles from './SurveyCard.module.scss'

const getConfig = () => ({
  SingleChoice: {
    isSelected: true,
    SurveyComp: SurveyGroup,
    selectKey: 'AnswerChoice',
    dataKey: 'Choices',
    props: {
      questionType: i18n.survey.single(),
      isSingle: true
    }
  },
  MultipleChoice: {
    isMultiple: true,
    isSelected: true,
    SurveyComp: SurveyGroup,
    selectKey: 'AnswerChoices',
    dataKey: 'Choices',
    props: {
      questionType: i18n.survey.multiple(),
      isSingle: false
    }
  },
  Text: {
    SurveyComp: SurveyInput,
    selectKey: 'AnswerText',
    props: {
      questionType: i18n.survey.text(),
      isSingle: false
    }
  },
  FillInBlank: {
    SurveyComp: SurveyNumber,
    props: {
      questionType: i18n.survey.text(),
    }
  },
  Section: {
    isSection: true,
    SurveyComp: SurveyHeader,
    props: {
      questionType: i18n.survey.all(),
      hiddenOpt: true,
      isSingle: false,
    },
  },
  GeneralScale: {
    SurveyComp: SurveyScale,
    props: {
      questionType: i18n.survey.single(),
      isSingle: true,
    }
  },
  PainScale: {
    SurveyComp: SurveyScale,
    props: {
      questionType: i18n.survey.single(),
      isSingle: true,
      isPain: true,
    }
  },
  MultipleSubChoice: {
    isMultiple: true,
    isSelected: true,
    SurveyComp: SurveySubChoice,
    selectKey: 'AnswerChoices',
    dataKey: 'Choices',
    props: {
      questionType: i18n.survey.multiple(),
      isSingle: false
    }
  },
  SingleSubChoice: {
    isSelected: true,
    SurveyComp: SurveySubChoice,
    selectKey: 'AnswerChoice',
    dataKey: 'Choices',
    props: {
      questionType: i18n.survey.single(),
      isSingle: true
    }
  },
})

const SurveyCard = ({
  index, questions, language, submitted, isNormal, onChange, id, onFocusFun, onBlurFun
}) => {
  const config = useMemo(() => getConfig(), [])
  if (!Array.isArray(questions) || questions.length <= 0) return null
  const isHasQuestion = questions.length > 1 || questions[0]?.QuestionType !== 'Section'
  return (
    <View className={`${styles.container} ${isHasQuestion ? '' : styles.emptyContainer}`} id={id}>
      {
        questions.map((item, subIndex) => {
          const {
            QuestionText, Required, QuestionType, QuestionStyle
          } = item
          const configItem = config[QuestionType] || config[QuestionStyle]
          if (!configItem) return null
          const { props = {}, SurveyComp, isSection } = configItem
          const extraProps = {}
          const ordinal = (subIndex === 0 ? index + 1 : subIndex)
          isSection && Object.assign(extraProps, { label: QuestionText?.[language], isShowTopLine: subIndex > 1, isEmpty: !isHasQuestion })
          subIndex > 1 && Object.assign(extraProps, { isShowTopLine: true })
          return (
            <SurveyComp
              key={subIndex}
              {...props}
              {...extraProps}
              onFocusFun={onFocusFun}
              onBlurFun={onBlurFun}
              onChange={newItem => onChange?.(index, subIndex, newItem)}
              disabled={submitted}
              ordinal={ordinal}
              submitted={submitted}
              language={language}
              required={Required}
              isNormal={isNormal}
              isHasQuestion={isHasQuestion}
              data={item}
            />
          )
        })
      }
    </View>
  )
}
export default SurveyCard
